<template>
  <div class="apply_page">
    <van-nav-bar
      title="事项办理详情"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="base_info">
      <p>申请人信息</p>
      <van-field
        v-model="form.username"
        label="姓名"
        placeholder="请输入姓名"
        disabled
        class="repair_input_box"
        required
      />
      <van-field
        v-model="form.idcardNo"
        label="身份证号"
        placeholder="请输入身份证号"
        disabled
        class="repair_input_box"
        required
      />
      <van-field
        v-model="form.contactPhone"
        type="number"
        label="手机号"
        placeholder="请输入手机号"
        disabled
        maxlength="15"
        class="repair_input_box"
        required
      />
    </div>
    <div class="devide_div"></div>
    <div class="base_info">
      <!-- <p>所需材料</p> -->
      <!-- <div class="image_box" v-for="item in items" :key="item.id">
        <div class="content_desc">{{ item.attachName }}</div>
        <van-uploader
          v-model="item.avatar"
          :max-count="5"
          :name="item.attachName"
          class="img_upload_box"
          :before-read="beforeRead"
          :before-delete="beforeDelete"
          :after-read="afterRead"
        />
      </div> -->
      <div
        class="manage_content"
        v-for="item in items"
        :key="item.id"
      >
        <span>{{ item.attachName }}</span>
        <img v-for="(option,index) in item.imgList" v-lazy="option" :key="option" @click="imagePreview(index,item.imgList)"/>
      </div>
    </div>
    <div class="devide_div"></div>
    <div class="base_info">
      <p>
        收件方式
        <span style="float:right">{{
          form.receiveType === 1 ? "自取" : "EMS邮政"
        }}</span>
      </p>
      <!-- <van-radio-group
        v-model="form.receiveType"
        class="radio_group_box"
        disabled
      >
        <van-radio icon-size="35px" name="1" checked-color="#DC4630"
          ><span
            :style="{ color: form.receiveType == '1' ? '#333333' : '#999999' }"
            >自取</span
          ></van-radio
        >
        <van-radio
          icon-size="35px"
          name="2"
          checked-color="#DC4630"
          style="margin-top:30px"
          ><span
            :style="{ color: form.receiveType == '2' ? '#333333' : '#999999' }"
            >EMS邮政（快递费为到付）</span
          ></van-radio
        >
      </van-radio-group> -->
      <van-field
        v-if="form.receiveType === 2 || form.receiveType === '2'"
        v-model="form.receiveAddress"
        label="收件地址"
        placeholder="请输入收件地址"
        disabled
        class="repair_input_box"
      />
    </div>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
import { ImagePreview } from 'vant';
export default {
  data() {
    return {
      form: {
        username: "",
        idcardNo: "",
        contactPhone: "",
        applyInfos: [],
        receiveType: 1,
        receiveAddress: '',
      },
      showLoading: false,
      items: []
    };
  },
  mounted() {
    this.getDetail(this.$route.query.id)
    // this.items = this.$route.query.applyInfos;
    // if (this.items) {
    //   this.items.forEach(e => {
    //     e.imageList = [];
    //     e.imageList = e.attachUrl.split(",");
    //   });
    // }
  },
  methods: {
    imagePreview(index,images) {
      ImagePreview({
        images: images,
        startPosition: index
      })
    },
    getDetail(id) {
      api.service_apply_v1_find(id).then(res => {
        if (res.code === "0") {
          this.form = res.datas
          this.items = this.form.applyInfos
          this.items.forEach(e => {
            if (e.attachUrl.split(',').length > 1) {
              e.imgList = e.attachUrl.split(',')
            } else {
              e.imgList = [e.attachUrl]
            }
          })
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/workstation.scss";

.apply_page {
  background: #ffffff;
  height: 100%;
  position: relative;

  .manage_content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    background: #ffffff;

    span {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      padding: 14.5px 0 10px 0;
      width: 100%;
    }

    img {
      border-radius: 4.25px;
      width: 2.13333rem;
      height: 1.73333rem;
    }

    img:nth-child(3n + 1) {
      margin-left: 7.5px;
    }

    img:nth-child(3n + 3) {
      margin-left: 7.5px;
    }

    img:nth-child(n + 5) {
      margin-top: 7.5px;
    }

    li {
      padding: 14.5px 0;
      width: 100%;
      border-bottom: 1px solid #edeff2;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    li:first-child {
      padding-top: 20px;
    }
    li:last-child {
      border: none;
    }

    .content_key {
      width: 106px;
      float: left;
    }

    .content_text {
      width: 239px;
      float: right;
      text-align: right;
    }
  }

  .base_info {
    p {
      font-size: 18px;
      color: #333333;
      line-height: 25px;
      padding: 10px 15px;
      border-bottom: 1px solid rgba(226, 226, 226, 0.5);
    }

    .radio_group_box {
      padding: 15px;
      border-bottom: 1px solid rgba(226, 226, 226, 0.5);
    }
  }

  .image_box {
    padding: 10px 15px 0;
    border-bottom: 1px solid rgba(226, 226, 226, 0.5);

    .content_desc {
      line-height: 20px;
      font-size: 14px;
      color: #333333;
      width: 245px;
      word-break: break-all;
      float: left;

      .download_btn {
        background: rgba(220, 70, 48, 0.1);
        border-radius: 2px;
        font-size: 10px;
        color: #dc4630;
        text-align: center;
        line-height: 14px;
        padding: 2px 8.5px;
      }
    }

    .img_upload_box {
      float: right;
    }
  }

  .image_box::after {
    content: "\20";
    display: block;
    height: 0;
    clear: both;
  }

  .image_box::before {
    position: absolute;
    left: 0.21333rem;
    color: #f44;
    font-size: 0.37333rem;
    content: "*";
  }

  .van-popup {
    background-color: #ffffff00;
  }
}
</style>

<style lang="scss">
.apply_page {
  .van-field__control {
    text-align: right;
    font-size: 14px;
  }

  .repair_input_box {
    .van-field__control {
      margin-right: 24px;
    }
  }

  .image_box {
    .van-uploader__preview-image {
      width: 80px;
      height: 65px;

      .van-image__error,
      .van-image__img,
      .van-image__loading {
        border-radius: 5px;
      }
    }

    .van-uploader__upload {
      width: 80px;
      height: 65px;
      border-radius: 5px;
      border-style: solid;
      background-color: #f5f7fa;
    }

    .van-uploader__upload-icon {
      font-size: 25px;
    }
  }
}
</style>
